//登陆后用户中心
'use strict';
import React, {Component} from 'react';
import Util from '../common/util';
import {
    View,
    Text,
    ScrollView,
    PanResponder,
    TouchableOpacity,
    Image, Platform,
    StyleSheet,
    Linking
} from 'react-native';

export default class userCenter extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {

        };
    }



    //跳转
    linkJump(link,user_id) {
        this.props.navigation.push(link,{
            user_id:user_id,
            onLogout:this.props.onLogout
        })
    }

    showUserInfo(userInfo) {
        return (
            <View style={styles.user_info_view}>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <View style={styles.portrait_view}>
                        <Image
                            source={userInfo.portrait ? {uri: userInfo.portrait} : require('../imgs/boy.png')}
                            resizeMode={'cover'}
                            style={styles.portrait_img}
                        />
                    </View>
                    <View
                        style={{paddingLeft: 10, flexDirection: 'column', justifyContent: 'space-around', height: 70}}>
                        <Text style={{fontSize: 14, color: "#fff"}}>用户名：{userInfo.user_name} ({userInfo.user_id})</Text>
                        <View style={{flexDirection: 'row', justifyContent: "flex-start"}}>
                            <View style={styles.cate_name_view}>
                                <Text style={{fontSize: 12, color: "#e60f0a"}}>{userInfo.cate_name}</Text>
                            </View>
                        </View>
                        <Text style={{fontSize: 12, color: "#fff"}}>更多会员等级享更多折扣</Text>
                    </View>
                </View>
            </View>
        )
    }

    toOrder(userData,status) {
        this.props.navigation.push('OrderList',{
            orderStatus:status,
            user_id:userData.userInfo.user_id
        })
    }

    openQQ() {
        let qq = '799542615'
        let url = "mqqwpa://im/chat?chat_type=wpa&uin=" + qq;//调用QQ
        Linking.canOpenURL(url).then(supported => {
            if (supported) {
                Linking.openURL(url);
            }
        });
    }

    showOrderNum(order_num) {
        if (order_num == 0) {
            return null
        }
        return (
            <View style={styles.order_num_view}>
                <Text style={{fontSize: 12, color: "#fff"}}>{order_num > 99 ? '..' : order_num}</Text>
            </View>
        )
    }

    //订单tag
    showOrderView(userData) {
        return (
            <View style={{paddingHorizontal: 10}}>
                <View style={styles.order_header}>
                    <Text style={{fontSize: 14, color: "#000"}}>我的订单</Text>
                    <TouchableOpacity onPress={() => this.toOrder(userData,'')} style={{flexDirection: 'row'}}>
                        <Text style={{fontSize: 12, color: "#969696"}}>查看全部订单</Text>
                        <Image
                            source={require('../imgs/right_arrow.png')}
                            resizeMode={'cover'}
                            style={{width: 15, height: 15,}}
                        />
                    </TouchableOpacity>
                </View>
                <View style={styles.order_item_view}>
                    <TouchableOpacity onPress={() => this.toOrder(userData,'pending')} style={styles.order_item}>
                        <Image
                            source={require('../imgs/jiayi_mine_01.jpg')}
                            resizeMode={'cover'}
                            style={{width: 25, height: 20, marginBottom: 5}}
                        />
                        <Text style={{fontSize: 12, color: "#696969"}}>待付款</Text>
                        {this.showOrderNum(userData.order.pending_num)}
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.toOrder(userData,'accepted')} style={styles.order_item}>
                        <Image
                            source={require('../imgs/jiayi_mine_02.jpg')}
                            resizeMode={'cover'}
                            style={{width: 25, height: 20, marginBottom: 5}}
                        />
                        <Text style={{fontSize: 12, color: "#696969"}}>待发货</Text>
                        {this.showOrderNum(userData.order.accepted_num)}
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.toOrder(userData,'shipped')} style={styles.order_item}>
                        <Image
                            source={require('../imgs/jiayi_mine_03.jpg')}
                            resizeMode={'cover'}
                            style={{width: 25, height: 20, marginBottom: 5}}
                        />
                        <Text style={{fontSize: 12, color: "#696969"}}>待收货</Text>
                        {this.showOrderNum(userData.order.shipped_num)}
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.toOrder(userData,'finished')} style={styles.order_item}>
                        <Image
                            source={require('../imgs/jiayi_mine_04.jpg')}
                            resizeMode={'cover'}
                            style={{width: 25, height: 20, marginBottom: 5}}
                        />
                        <Text style={{fontSize: 12, color: "#696969"}}>待评价</Text>
                        {this.showOrderNum(userData.order.order_sum)}
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.toOrder(userData,'refund')} style={styles.order_item}>
                        <Image
                            source={require('../imgs/jiayi_mine_05.jpg')}
                            resizeMode={'cover'}
                            style={{width: 25, height: 20, marginBottom: 5}}
                        />
                        <Text style={{fontSize: 12, color: "#696969"}}>售后</Text>
                        {this.showOrderNum(userData.order.back_num)}
                    </TouchableOpacity>
                </View>
            </View>
        )
    }

    //我的服务tag
    showServiceView(user_id) {
        return (
            <View style={{paddingHorizontal: 10, borderTopWidth: 10, borderTopColor: "#f0f0f0"}}>
                <View style={styles.order_header}>
                    <Text style={{fontSize: 14, color: "#000"}}>我的服务</Text>
                </View>
                <View style={styles.service_item_view}>
                    <TouchableOpacity onPress={() => this.linkJump('UserWallet',user_id)} style={styles.service_item}>
                        <Image
                            source={require('../imgs/jiayi_mine_06.jpg')}
                            resizeMode={'cover'}
                            style={{width: 25, height: 20, marginBottom: 10}}
                        />
                        <Text style={{fontSize: 12, color: "#696969"}}>我的钱包</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.linkJump('UserCoupon',user_id)} style={styles.service_item}>
                        <Image
                            source={require('../imgs/jiayi_mine_07.jpg')}
                            resizeMode={'cover'}
                            style={{width: 25, height: 20, marginBottom: 10}}
                        />
                        <Text style={{fontSize: 12, color: "#696969"}}>优惠券</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.linkJump('UserGroup',user_id)} style={styles.service_item}>
                        <Image
                            source={require('../imgs/jiayi_mine_08.jpg')}
                            resizeMode={'cover'}
                            style={{width: 25, height: 20, marginBottom: 10}}
                        />
                        <Text style={{fontSize: 12, color: "#696969"}}>我的拼团</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.linkJump('UserCollection',user_id)} style={styles.service_item}>
                        <Image
                            source={require('../imgs/jiayi_mine_09.jpg')}
                            resizeMode={'cover'}
                            style={{width: 25, height: 20, marginBottom: 10}}
                        />
                        <Text style={{fontSize: 12, color: "#696969"}}>我的收藏</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.linkJump('AppSetting',user_id)} style={styles.service_item}>
                        <Image
                            source={require('../imgs/jiayi_mine_10.png')}
                            resizeMode={'cover'}
                            style={{width: 25, height: 20, marginBottom: 10}}
                        />
                        <Text style={{fontSize: 12, color: "#696969"}}>设置</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.linkJump('UserHistory',user_id)} style={styles.service_item}>
                        <Image
                            source={require('../imgs/jiayi_mine_11.jpg')}
                            resizeMode={'cover'}
                            style={{width: 25, height: 20, marginBottom: 10}}
                        />
                        <Text style={{fontSize: 12, color: "#696969"}}>足迹</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.linkJump('AddressAdmin',user_id)} style={styles.service_item}>
                        <Image
                            source={require('../imgs/jiayi_mine_12.jpg')}
                            resizeMode={'cover'}
                            style={{width: 25, height: 20, marginBottom: 10}}
                        />
                        <Text style={{fontSize: 12, color: "#696969"}}>地址</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.openQQ()} style={styles.service_item}>
                        <Image
                            source={require('../imgs/jiayi_mine_13.jpg')}
                            resizeMode={'cover'}
                            style={{width: 25, height: 20, marginBottom: 10}}
                        />
                        <Text style={{fontSize: 12, color: "#696969"}}>客服</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }

    render() {
        let datas = this.props.datas
        let user_id = datas.user_id
        let userData = datas.data
        let userInfo = userData.userInfo
        return (
            <View style={{flex: 1, backgroundColor: "#fff"}}>
                {this.showUserInfo(userInfo)}
                {this.showOrderView(userData)}
                {this.showServiceView(user_id)}
            </View>
        )
    }
}
var styles = StyleSheet.create({
    user_info_view: {
        paddingHorizontal: 20,
        height: 180,
        backgroundColor: "#e60f0a",
        paddingTop: 40
    },
    portrait_view: {
        width: 74,
        height: 74,
        borderRadius: 37,
        borderWidth: 2,
        borderColor: "#fff"
    },
    portrait_img: {
        width: 70,
        height: 70,
        borderRadius: 35,
    },
    cate_name_view: {
        height: 18,
        paddingHorizontal: 9,
        borderRadius: 10,
        backgroundColor: "#fff",
        justifyContent: 'center',
    },
    order_header: {
        height: 50,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderBottomWidth: 1,
        borderBottomColor: "#f0f0f0"
    },
    order_item_view: {
        flexDirection: 'row',
    },
    order_item: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingVertical: 20
    },
    service_item_view: {
        flexDirection: 'row',
        flexWrap: "wrap"
    },
    service_item: {
        width: (Util.size.width - 20) / 4,
        alignItems: 'center',
        justifyContent: 'center',
        height: 80
    },
    order_num_view: {
        position: 'absolute',
        top: 10,
        right: 10,
        width: 16,
        height: 16,
        borderRadius: 8,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: "#f00"
    }
})